<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
	<title>充值缴费</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
	<link rel="stylesheet" href="../css/aui.css" />
	<link rel="stylesheet" href="../css/mui.css" />
	<link rel="stylesheet" href="../css/public-head.css" />
	<link rel="stylesheet" type="text/css" href="../css/RechargePayment.css" />
</head>

<body>

	<div class="background">
		<img src="../image/icon/bj-czjf.png">
	</div>
	<div class="recharge">
		<div class="banner">
			<div>
				<!-- <img src="../image/icon/touxiang@2x.png" alt="" /> -->
				<div id="isLogin">
					<!-- <div class="banner_1">下午好，张先生！</div>
					<div class="banner_2">桂A·75N17</div>
					<div class="banner_3">您的黄金VIP会员已过期</div> -->
				</div>
			</div>

		</div>
	</div>
	<div class="rec-2 ">
		<div class="e-1 e-11">
			<div></div><span>购买VIP套餐</span></div>
		<div class="slide-box" id="vipLists_box">



		</div>
	</div>
	</div>
	<div class="rec-3">
		<!--<div class="e-1">
			<div></div><span>充值缴费</span>
		</div>
		<div>
			<div class="bnt">
				<div class="bnt-1" >
					<p>油卡充值</p>
					<div class="span">中石油,中石化在线<span style="color: #0A5AFA;">直充</span></div>
					<img src="../image/icon/czjf-ykcz@2x.png" />
				</div>
				<div>
					<div class="bnt-2">
						<img src="../image/icon/czjf-wzcx@2x.png" />
						<div class="bnt-span"><span>查询违章</span></div>
					</div>

					<div class="bnt-3">
						<img src="../image/icon/czjf-wzjf@2x.png" />
						<div class="bnt-span"><span>违章缴费</span></div>
					</div>
				</div>
			</div>
			<div class="insurance">
				<div><img src="../image/icon/czjf-cxzg@2x.png" /></div>
				<div style="margin-left: 30px;">
					<p>车险直购</p>
					<span>北部湾车险</span>&nbsp;&nbsp;&nbsp;<span style="color: #0A5AFA;">多·快·好·省</span>
				</div>
			</div>
		</div>-->
	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script src="../script/template-web.js" type="text/javascript" charset="utf-8"></script>
<!-- vip套餐 -->
<script type="text/html" id="vipLists_tpl">
	{{each data as val}}
	<div class="slide-item" tapmode onclick="SetMeal({{val.id}})">
		<img src="{{val.simple_icon}}" />
		<div class="setmeal">
			<span class="s1-1"></span><br />
			<span class="s2"></span><br />
			<span class="s3"></span><span class="s4" </span>
		</div>
	</div>
	{{/each}}
</script>
<!-- vip个人信息 -->
<script type="text/html" id="loginTemp">
	{{if isLogin.avatar==null}}
	<img src="../image/icon/touxiang@2x.png" alt="" />
	{{else}}
	<img src="{{isLogin.avatar}}" alt="" class="avatar">
	 {{/if}}
	<div class="banner_1">{{isLogin.showTime}}{{isLogin.nickname}}</div>
	<!-- <div class="banner_2">桂A·75N17</div> -->
	{{if vip_info.is_vip=="true"}}
	<div class="banner_3">{{vip_info.info.title}}</div>
	{{else}}
	<div class="banner_3">您还未开通会员</div>
	{{/if}}
</script>
<script type="text/javascript">
	apiready = function() {
		init()
		// 获取登录信息
		fnGetLoginData1()
		// 获取vip列表
		vipList()
	};
	headInner({
			title: "",
			//headleft
			headl: '<div class="tu_1"><img src="../image/icon/dw-bs@2x.png" alt=""/></div><div class="didian">南宁</div>',
			//headright
			headr: '<div class="tu_2" tapmode onclick="Being()"><img src="../image/icon/xx-bs@2x.png" alt="" /></div>',
			color: "transparent", //默认是蓝色
			padding: "0 0 0", //默认有padding:45px 15px 0;
		})
		// 获取登录信息
	function fnGetLoginData1() {
		console.log("调用充值成功");
		fnshowTime()
		var vip_infodata;
		BASE.MYajax({
			'pathName': 'users/getUserInfo',
			'method': initInfo
		});

	}
	var obj = {};

	function initInfo(ret, err) {
	    if (ret.code == 200) {
				var vip_data=ret.data;
				vip_data.showTime = showTime;
				obj.isLogin=vip_data;
	        console.log("调用主页成功");
					BASE.MYajax({
						'pathName': 'vip/getVipInfo',
						'methods': 'get',
						'method': GetvipBackData
					});
	    }

	}
	function GetvipBackData(ret,err) {
		if(ret.code==200){
			obj.vip_info=ret.data;
		}
		console.log(JSON.stringify(obj));
		var html = template('loginTemp', obj);
		document.getElementById('isLogin').innerHTML = html; //绑定ID 渲染
	}

	function Login() {
		api.openWin({
			name: 'Login',
			url: 'Login.html',
			bounces: false,
			opaque: false,
			showProgress: true,
			vScrollBarEnabled: false,
			hScrollBarEnabled: false,
			slidBackEnabled: false,
			delay: 1000,
			animation: {
				type: 'ripple',
				duration: 1000
			}
		});
	}

	function fnshowTime() {
		var now = new Date();
		var hour = now.getHours();
		if (hour < 6) {
			showTime = "凌晨好！"
		} else if (hour < 9) {
			showTime = "早上好！"
		} else if (hour < 12) {
			showTime = "上午好！"
		} else if (hour < 14) {
			showTime = "中午好！"
		} else if (hour < 17) {
			showTime = "下午好！"
		} else if (hour < 19) {
			showTime = "傍晚好！"
		} else if (hour < 22) {
			showTime = "晚上好！"
		} else {
			showTime = "夜里好！"
		}
	}


	// VIP套餐列表
	function vipList() {
		BASE.MYajax({
				'pathName': 'vip/index', //请求路径
				'methods': 'get',
				'method': vipBackData //调用函数
		});
	}
	function vipBackData(ret,err) {
		if(ret.code==200){
			var html=template("vipLists_tpl",ret);
			$api.byId('vipLists_box').innerHTML=html;
		}else{
			reToast(ret,err)
		}
	}

	//跳转

	function mine_2() {
		api.openWin({
			name: 'mine_2',
			url: '../html/mine_2.html'
		});
	}

	function SetMeal(id) {
		api.openWin({
			name: 'SetMeal',
			url: '../html/SetMeal.html',
			pageParam: {
				vipInfo: id
			},
		});

	}

	function oilCard() {
		api.openWin({
			name: 'oilCard',
			url: '../html/oilCard.html'
		});
	}

	//正在开发中
    function Being(){
    	api.toast({
				msg: '敬请期待~',
				duration: 2000,
				location: 'bottom'
			});
    }
    //轮播
	function mySwiper() {
			var mySwiper = new Swiper('.swiper-container', {
				autoplay: true, //自动滑动
				pagination: '.swiper-pagination',
			})
		}
</script>

</html>
